<%@ page contentType="text/html;charset=UTF-8"%>
<%@include file="../../common/sessionValidate.jsp" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML>
<html lang="UTF-8">
  <head>
    <title>T_product_spec信息维护</title>
    <%@ include file="../../common/meta.jsp"%>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="X-UA-Compatible" content="IE=9">
	<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
    <link rel="stylesheet" href="<%=basePath%>css/my-bootstrap.css" media="screen"  id="tuserskin">
    <link rel="stylesheet" href="<%=basePath%>js/toastr/toastr.css">
    <link rel="stylesheet" href="<%=basePath%>css/bootstrapValidator.min.css">
    <link rel="stylesheet" href="<%=basePath%>css/font-awesome.min.css">
    <script type="text/javascript" src="<%= basePath %>js/jquery.cookie.js"></script>
  </head>
  <style>
	hr {
	    margin-top:1px;
	    border-bottom: 1px solid #1BBC9B;
	}
  </style>
  <body>
  <div class="" style="margin-right:2px;padding-right:1px;">

    <!--------------------------查询条件表格  start------------------------------->
  	<!-- 查询面板
  	<form class="form-horizontal" name="form1" id="form1">
	<div class="panel panel-primary" id="cxDiv">
	  <div class="panel-heading  " >
      	<i class='icon-filter'></i>&nbsp;查询内容
        <span class="text-right pull-right">
        	<button type="button" class=" btn btn-success btn-xs img-rounded"  onclick="Search(0)"><i class="icon-search"></i>&nbsp;查询</button>&nbsp;
            <button type="reset" class=" btn btn-success btn-xs img-rounded"  > <span class="icon-retweet"></span>&nbsp;重置</button>&nbsp;
            <button type="button" class=" btn btn-success btn-xs img-rounded" id="shButton" >&nbsp;<span id="qhDiv" class="icon-chevron-up"></span>&nbsp;</button>

        </span>
	  </div>
	  <div class="panel-body" id="shDiv" class="panel-collapse collapse in">
	  	 <div class="col-xs-3">
	          <div class="form-group">
	              <label class="control-label col-xs-5">spec_id</label>
	              <div class="col-xs-7">
	              	<input name="spec_id" type="text" class="form-control">
	              </div>
	          </div>
	      </div>
	  	 <div class="col-xs-3">
	          <div class="form-group">
	              <label class="control-label col-xs-5">开始时间</label>
	              <div class="col-xs-7">
	              	<input name="startdate" id="startdate" type="text" class="form-control" onclick='SelectDate(this)' readonly='true'>
	              </div>
	          </div>
	      </div>
	  	 <div class="col-xs-3 ">
	          <div class="form-group">
	              <label class="control-label col-xs-5">截止时间</label>
	              <div class="col-xs-7">
	              	<input name="enddate" id="enddate" type="text" class="form-control" onclick='SelectDate(this)' readonly='true'>
	              </div>
	          </div>
	      </div>
	      <div class="col-xs-3">
	          <div class="form-group">
	              <label class="control-label col-xs-6">属性名</label>
	              <div class="col-xs-6">
	              	<input name="spec_name" type="text" class="form-control">
	              </div>
	          </div>
	      </div>
	      <div class="col-xs-3">
	          <div class="form-group">
	              <label class="control-label col-xs-6">状态</label>
	              <div class="col-xs-6">
	              	<input name="status" type="text" class="form-control">
	              </div>
	          </div>
	      </div>
	      <div class="col-xs-3">
	          <div class="form-group">
	              <label class="control-label col-xs-6">备注</label>
	              <div class="col-xs-6">
	              	<input name="memo" type="text" class="form-control">
	              </div>
	          </div>
	      </div>
	  </div>
	</div>
    </form>
    -->
    <!--------------------------查询条件表格end------------------------------------->

    <!--------------------------信息列表：带表格面板  start--------------------------------->
	<div class="panel panel-primary">
	  <div class="panel-heading clearfix" >
	  	 <i class='icon-reorder'></i>&nbsp; 数据列表
	  	 <span class="text-right pull-right ">
            <!--
            <a href="<%=basePath%>t_product_spec/toT_product_specCurd?oplx=add" class="text-danger"><i class='icon-plus'></i>&nbsp;新增</a>&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="#" onclick="toEdits()" class="text-danger"><i class='icon-pencil'>&nbsp;修改</i></a>&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="#" onclick="toViews()"  class="text-danger"><i class='icon-table'></i>&nbsp;查看</a>&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="#" onclick="getDel()" class="text-danger"><i class='icon-minus'></i>&nbsp;删除</a>&nbsp;&nbsp;&nbsp;&nbsp;
             -->
            <a href="#" onclick="Search(0)" class="text-danger btn-sm"><i class='icon-refresh'></i>&nbsp;刷新</a>&nbsp;&nbsp;
            <a href="#" onclick="showOrHidden()" class="text-danger btn-sm"><span id="fsDiv" class='glyphicon glyphicon-resize-full'></span></a>
	     </span>
	  </div>
	  <div class="panel-body">
		  <div class="row">
			<div class="col-xs-5">
			    <p><!-- 每页显示<select id="pageSize" class=" label-primary" onchange="Search(0)">
				  <option value="5" >5</option>
				  <option value="10" >10</option>
				  <option value="20">20</option>
				  <option value="30">30</option>
				  <option value="50">50</option>
				 </select>条记录， -->&nbsp;&nbsp;&nbsp;&nbsp;共有记录：<span id="totalCount" class="label label-primary">0</span> 条，总页数：<span id="totalPageNo" class="label label-primary">0</span>页。
		        </p>
			    <table id="grid" class="table table-condensed table-striped table-bordered table-hover" class="sortable" cellpadding="0" cellspacing="0" border="0" class="display" width="100%">
			     <thead id="grid_head">
			      <tr>
			          <th style="width:70px">类别</th>
			          <th style="width:50px">操作</th>
			      </tr>
			     </thead>
			     <tbody id="grid_body"></tbody>
			    </table>
			    <div class="paging-toolbar">
			   		<ul class="pager" style='margin-bottom:5px;' id='grid_paging'></ul>
			    </div>
	        </div>
			<div class="col-xs-7" id="">
				<div id="specProductDiv">
					<span class='label-primary'>类别名称：</span>
				 	<input type="text" id="vpname" name="vpname" value=""  readonly="true">
				 	&nbsp;&nbsp; <span class='label-primary'>类别id：</span>
				 	<input type="text" id="vproduct_id" name="vproduct_id" value="" readonly="true">
				</div>
			    <table id="" class="table table-condensed table-striped table-bordered table-hover" class="sortable" cellpadding="0" cellspacing="0" border="0" class="display" width="100%">
			     <thead id="">
			        <tr>
			        	<th>属性id</th>
			        	<th>属性名</th>
			        	<th style="width:150px">操作</th>
 				    </tr>
			     </thead>
			     <tbody id="specDiv"></tbody>
			    </table>
			</div>
		  </div>

	  </div>
    </div>
    <!--------------------------信息列表：带表格面板 end------------------------------------>

	<!--------------------------添加/修改/查看 信息的弹出层start--------------------------->
	<div id="add" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	    <div class="modal-dialog"  style="width:100%;">
	        <div class="modal-content">
	            <div class="modal-header  label-primary" id="addHeaderDiv">
	            </div>
	            <form class="form-horizontal form-bordered form-row-strippe" name="ffAdd" id="ffAdd" mentod="post" role="form" data-toggle="validator" enctype="multipart/form-data">
	                <div class="modal-body">
	                    <!--<div class="row"  style="border:1px solid #dddddd;"> -->
	                    <div class="row" >

	                    	<div class="col-xs-6"><!--start 换列-->
								<div class="col-xs-12">
			                        <div class="form-group">
			                            <label class="control-label col-xs-3">属性id</label>
			                            <div class="col-xs-9">
			                                <input id="spec_id" name="spec_id" type="text" class="form-control" placeholder="自动生成，不需填写" readonly="true"/>
			                            </div>
			                        </div>
			                    </div>
			                    <div class="col-xs-12">
			                        <div class="form-group">
			                            <label class="control-label col-xs-3">属性所属类别</label>
			                            <div class="col-xs-9">
			                                <input type="text" id="pname" name="pname"  class="form-control" placeholder="pname"  readonly="true"/>
			                                <input type="hidden"  id="product_id" name="product_id"  value="" />
			                            </div>
			                        </div>
			                    </div>
		                    <!--如果输入元素是偶数个元素，在n=size/2?int时输出2列格式；如果元素是奇数个，需要在n=size/2?int时输出2列格式；需要换列，每行最多显示2列-->
		                    </div><!--end 换列--><!--start 换列-->
		                    <div class="col-xs-6"><!--start 换列-->
			                    <div class="col-xs-12">
				                        <div class="form-group">
				                            <label class="control-label col-xs-3">属性名</label>
				                            <div class="col-xs-9">
				                                <input id="spec_name" name="spec_name" type="text" class="form-control" placeholder="spec_name" />
				                            </div>
				                        </div>
				                </div>
	                    	</div>
	                </div>
	                <div class="modal-footer bg-info" id="buttonDiv">
	                </div>
	            </form>
	        </div>
	    </div>
	</div>
	<!--------------------------添加/修改/查看 信息的弹出层 end---------------------------->

  </div>
  </body>
</html>

<script src="<%=basePath%>js/bootstrap.min.js"></script>
<!--<script src="<%=basePath%>js/jquery-1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrapValidator.js"></script>-->
<script src="<%=basePath%>js/bootstrap-paginator.min.js"></script>
<script src="<%=basePath%>/js/respond.js"></script>
<script src="<%=basePath%>/js/html5.js"></script>
<script src="<%=basePath%>js/toastr/toastr.js"></script>
<script src="<%=basePath%>js/bootbox.js"></script>
<script src="<%=basePath%>js/jquery.validate.js"></script>
<!-- <script src="<%=basePath%>js/additional-methods.min.js"></script> -->
<script src="<%=basePath%>js/my-jquery-curd.js"></script>
<script src="<%= basePath %>js/tableSortTool.js" ></script>
<script src="<%= basePath %>js/calendar.js" ></script>

<script type="text/javascript">

//新增属性名称层
function showSpecAddDiv(product_id, pname){
	showAddDiv2('类别属性','');

	$("#vproduct_id").val("");
	$("#vpname").val("");
	$("#vproduct_id").val(product_id);
	$("#vpname").val(pname);

	$("#product_id").val(product_id);
	$("#pname").val(pname);
}

//修改属性名称层
function showSpecEdit(spec_id, spec_name, product_id){
	//显示adddiv
	$("#add").modal("show");

	//设置addHeaderDiv标题文字及按钮
	setHeader2("修改属性名称", "");

	$("#product_id").val(product_id);
	$("#spec_id").val(spec_id);
	$("#spec_name").val(spec_name);
	$("#pname").val($("#vpname").val());

	setButtonDivEdit3();
}

//查看属性名称层
function showSpecView(spec_id, spec_name, product_id){
	//显示adddiv
	$("#add").modal("show");

	//设置addHeaderDiv标题文字及按钮
	setHeader2("查看属性名称", "");

	$("#product_id").val(product_id);
	$("#spec_id").val(spec_id);
	$("#spec_name").val(spec_name);
	$("#pname").val($("#vpname").val());

	setButtonDivView3();
}

//刷新属性名称区域
function refreashSpec(){
	 var vproduct_id = $("#vproduct_id").val();
     var vpname = $("#vpname").val();
     //alert("------vpname="+vpname+";vproduct_id="+vproduct_id);
	 showSpec(vproduct_id, vpname);
}

//根据查询条件，查询列表数据并显示
function Search(startIndex){
	var pageSize = 1000;//document.getElementById("pageSize").value;
	var condition = $("#form1").serialize();
	var url = "<%=basePath%>t_product/getAllT_product?startIndex=0&pageSize="+pageSize+"&"+condition+"&time="+Math.random();
	//alert(url);
	$.getJSON(url, function (data){
		//$("#pageSize").html(data.pageSize);
		$("#totalCount").html(data.totalCount);
		$("#totalPageNo").html(data.totalPageNo);
		$("#grid_body").html("");

		//1、表格行内容输出
	    $.each(data.items, function(i,item){
	    	if(item.product_id!=0){ //如果不是根，才显示，根不显示。
				var str="<tr >";
				if(item.level==0){
					//str+="<td onClick='showSpec(\""+item.product_id+"\",\""+item.pname+"\")'><i class='icon-home'></i>"+doNull(item.pname)+"</i></td>";
				}else if(item.level==1){
					str+="<td onClick='showSpec(\""+item.product_id+"\",\""+item.pname+"\")'><i class='icon-folder-open-alt'></i>"+doNull(item.pname)+"</td>";
				}else if(item.level==2){
					str+="<td onClick='showSpec(\""+item.product_id+"\",\""+item.pname+"\")'>&nbsp;&nbsp;&nbsp;&nbsp;<i class='icon-folder-open-alt'></i>"+doNull(item.pname)+"</td>";
				}else if(item.level==3){
					str+="<td onClick='showSpec(\""+item.product_id+"\",\""+item.pname+"\")'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class='icon-folder-close-alt'></i>"+doNull(item.pname)+"</td>";
				}
				str+="<td>&nbsp;&nbsp;";
				if(item.level==3){
					str+="<a href='javascript:showSpec(\""+item.product_id+"\",\""+item.pname+"\")' class='text-danger'>&nbsp;&nbsp;<span class='icon-list-alt' style='color:rgb(0, 128, 128)'>查看</span></a>&nbsp;&nbsp;";
					str+="<a href='javascript:showSpecAddDiv(\""+item.product_id+"\",\""+item.pname+"\")' class='text-danger'>&nbsp;&nbsp;<span class='icon-plus' style='color:rgb(0, 128, 128)'>新增</span></a>&nbsp;&nbsp;";
				}
				str+="</td>";
				str+="</tr>";
				$("#grid_body").append(str);
	    	}
		});//end each data;
    })//end getJSON;
}

//根据查询条件，查询列表数据并显示
function showSpec(product_id, pname){
	$("#vproduct_id").val("");
	$("#vpname").val("");
	$("#vproduct_id").val(product_id);
	$("#vpname").val(pname);

	var url = "<%=basePath%>t_product_spec/getAllT_product_spec?product_id="+product_id+"&startIndex=0&pageSize=1000&time="+Math.random();
	//alert(url);
	$.getJSON(url, function (data){
		$("#specDiv").html("");

		var productSpecDivVal = "";
		//1、表格行内容输出
	    $.each(data.items, function(i,item){
	    	productSpecDivVal ="";
			var str="<tr>";
			str+="<td>"+doNull(item.spec_id)+"</td>";
			str+="<td>"+doNull(item.spec_name)+"</td>";
			str+="<td>&nbsp;&nbsp;";
			str+="<a href='javascript:showSpecView(\""+item.spec_id+"\",\""+item.spec_name+"\",\""+item.product_id+"\")' class='text-danger'>&nbsp;&nbsp;<span class='glyphicon glyphicon-search' style='color:rgb(0, 128, 255)'></span>&nbsp;&nbsp;</a>";
			str+="<a href='javascript:showSpecEdit(\""+item.spec_id+"\",\""+item.spec_name+"\",\""+item.product_id+"\")' class='text-danger'>&nbsp;&nbsp;<span class='icon-pencil'  style='color:rgb(0, 128, 255)'></span>&nbsp;&nbsp;</a>";
			str+="<a href='javascript:del("+item.spec_id+")' class='text-danger'>&nbsp;&nbsp;<span class='icon-remove' style='color:rgb(0, 128, 255)'></span></a>&nbsp;&nbsp;";
			str+="</td>";
			str+="</tr>";
			$("#specDiv").append(str);
		});//end each data;
    })//end getJSON;
}

//删除函数
function del(id){
   	var url = "<%=basePath%>t_product_spec/delT_product_spec?id=" + id+"&time="+Math.random();
 	bootbox.confirm({
		size: 'small',
		buttons: {
	            confirm: {
	                label: ' 删除 ',
	                className: 'btn btn-sm btn-danger'
	            },
	            cancel: {
	                label: '   取消     ',
	                className: 'btn btn-success btn-sm'
	            }
        },
        message: '您确认要删除选中的记录？',
        callback: function(result) {
            if(result) {
            	if(result){
            		//myDel(url);
            		$.get(url,function(data){
            			if("success" == data.result){
            				showSuccessTips("删除成功", "提示");
            				//刷新
            				refreashSpec();
            			}else{
            				showErrorTips("删除数据"+id+"失败!", "错误信息：");
            			}
            		});
            	}
            }
        },
        title:'删除记录提示：',
        className:' '
	})
}

//新增保存数据
function add() {
	$("#addSaveButton").attr("disabled", true);
	var url = "<%=basePath%>t_product_spec/saveT_product_spec?time="+Math.random();
	var postData = $("#ffAdd").serializeArray();
	//alert(postData);
    $.post(url, postData, function (data) {
    	//var data = $.parseJSON(data);
        if (data.result=="success") {
            //保存成功  1.关闭弹出层，
          	showSuccessTips("恭喜保存成功!", "提示");
			//刷新
			refreashSpec();
        }
        else {
            $("#addSaveButton").removeAttr("disabled");
        	showErrorTips("保存数据失败!", "错误信息：");
        	return false;
        }
    }).error(function () {
        $("#addSaveButton").removeAttr("disabled");
    	showErrorTips("保存数据失败!", "错误信息：");
    });
}

//更新修改数据到后台
function edit(){
	$("#editSaveButton").attr("disabled", true);
	var url = "<%=basePath%>t_product_spec/updateT_product_spec?time="+Math.random();
    var postData = $("#ffAdd").serializeArray();
   	$.post(url, postData, function (data) {
    	//var data = $.parseJSON(json);
        if (data.result=="success") {
          	showSuccessTips("恭喜修改成功", "提示");
			//刷新
			refreashSpec();
        }
        else {
        	$("#editSaveButton").removeAttr("disabled");
        	showErrorTips("修改数据失败!", "错误信息：");
        }
    }).error(function () {
    	$("#editSaveButton").removeAttr("disabled");
    	showErrorTips("修改数据失败!", "错误信息：");
    });
}

$().ready(function(){
	//1、初始化数据显示
	Search(0);

	//2、隐藏或者显示
    $("#shButton").click(function(){
    	$("#shDiv").toggle();
    	$("#qhDiv").toggleClass("icon-chevron-up icon-chevron-down");
  	});

	//2、校验脚本初始化，start check
	$("#ffAdd").validate({
		submitHandler:function(form){
            //alert($("#opType").val());
            if($("#opType").val()=="add"){
            	add();
            }else if($("#opType").val()=="edit"){
            	edit();
            }
	    },
		rules: {
			spec_id: {
			    //required: true,
                digits: true,
			    //minlength: 1,
			    maxlength: 11
    		},
			spec_name: {
			    //required: true,
			    maxlength: 45
    		},
			status: {
			    //required: true,
			    maxlength: 45
    		},
			memo: {
			    //required: true,
			    maxlength: 45
    		},
			product_id: {
			    //required: true,
                digits: true,
			    //minlength: 1,
			    maxlength: 11
    		}
	    }, //end rules;
	    messages: {
			spec_id: {
			    //required: "属性id不能为空！",
                digits: "<font color='red'>请输入数字，不能输入非数字字符！</font>",
			    //minlength: "<font color='red'>最少输入1位！</font>",
			    maxlength: "<font color='red'>属性id最大支持11位，输入的数据已经超过最大长度！</font>"
    		},
			spec_name: {
			    maxlength: "<font color='red'>属性名最大支持45位,输入的数据已经超过最大长度！</font>"
    		},
			status: {
			    maxlength: "<font color='red'>状态最大支持45位,输入的数据已经超过最大长度！</font>"
    		},
			memo: {
			    maxlength: "<font color='red'>备注最大支持45位,输入的数据已经超过最大长度！</font>"
    		},
			product_id: {
			    //required: "类别id不能为空！",
                digits: "<font color='red'>请输入数字，不能输入非数字字符！</font>",
			    //minlength: "<font color='red'>最少输入1位！</font>",
			    maxlength: "<font color='red'>类别id最大支持11位，输入的数据已经超过最大长度！</font>"
    		}
	   } //end message;
   	}); //end validate;
}) //end funciton read;

</script>
